<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美团外卖，送啥都快</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			html,body{height: 100%;}
			/*上面部分*/
			.zhuye{width:100%;height: 870px;
			 background: url(mt-beijing.png) no-repeat center;background-size: cover;}
			.shangdaohan{width: 100%;height: 80px;position: fixed;top: 0;z-index: 99;}
			.shang{width: 1200px;height: 80px;margin: 0 auto;}
			.zhuye-logo{width:200px;height: 80px;float: left;margin: 10px 0;
			background: url(mt-logo.png) no-repeat center;background-size: cover;height: 60px;}
			.zhuye-logo a{width: 200px;height: 60px;display: block;}
			.daohang{width: 500px;height: 40px;float: right;}
			.daohang1{width: 40px;height: 40px;padding: 25px 0;font-weight: 900;border-bottom: 5px solid darkorange;}
			.daohang2{width: 80px;height: 40px;padding: 25px 0;margin-left: 30px;}
			.daohang3{width: 80px;height: 40px;padding: 25px 0;margin-left: 30px;}
			.daohang4{width: 80px;height: 40px;padding: 25px 0;margin-left: 30px;}
			.daohang5{width: 100px;height: 40px;padding: 25px 0;margin-left: 30px;}
			.zhuyedaohang{display: block;font-size: 20px;float: left;}
			.zhuyedaohang:hover{border-bottom: 5px solid darkorange;font-weight: 900;}
			.zhuyedaohang a{text-align: center;text-decoration: none;color: white;}
			/*中间部分*/
			.zhongjian{width: 1200px;height: 180px;margin: 0 auto;position:absolute; top:800px;left: 200px;z-index: 80;}
			.zhongjian1{width: 400px;height: 180px;float: left;background: url(yanse1.png) no-repeat center;background-size: cover;}
			.zhongjian2{width: 400px;height: 180px;float: left;background: url(yanse2.png) no-repeat center;background-size: cover;}
			.zhongjian3{width: 400px;height: 180px;float: left;background: url(yanse3.png) no-repeat center;background-size: cover;}
			.zhongjian1 a{width: 400px;height: 180px;display: block;}
			.zhongjian2 a{width: 400px;height: 180px;display: block;}
			.zhongjian3 a{width: 400px;height: 180px;display: block;}
			.zhongjian1:hover{transform: scale(1.1);transition: all 0.5s;}
			.zhongjian2:hover{transform: scale(1.1);transition: all 0.5s;}
			.zhongjian3:hover{transform: scale(1.1);transition: all 0.5s;}
			/* 中间部分2 */
			.meiti{width: 100%;height: 1100px;background:url(dabeijing.png) no-repeat center;background-size: 480px 120px;
			background-position: 550px 160px;position: relative;}
			.xinwen{width: 100%;height: 700px;background:url(dabeijing2.png) no-repeat center;background-size:380px 150px;
			background-position: 600px 160px;background-color:rgba(255,194,54,1);padding-top: 450px ;}
			.mt{width:610px ;height: 670px;position: absolute;top: 400px;left: 150px;}
			.mt dt a{font-size: 45px;text-decoration: none;color: black;display: block;padding-left: 80px;}
			.mt dd a{font-size: 30px;text-decoration: none;color: black;display: block;margin-top: 40px;
			background:url(tubiao3.png) no-repeat left;background-size:40px 40px;background-position: 30px 0px;padding-left: 80px;s}
			.mt dd:hover{color: darkorange;} 
			.mt dd:hover a{color: darkorange;font-size: 40px;transition: all 0.5s;}
			.mt dd p{width: 120px;height: 50px;margin-top: 10px;padding-left: 80px;}
			.ri{width: 400px;height: 780px;position: absolute;top: 380px;left: 1000px;background-image: url(shouji.png);
			background-size: 390px 770px;background-repeat: no-repeat;background-position: center;}
			.mengxiang{width: 1200px;height: 600px;margin: 0 auto;
			line-height: 600px;background-image: url(and1.png);background-size: 1000px 500px;
			background-repeat: no-repeat;background-position: center;}
			.mengxiang b{font-size: 50px;float: left;}
			.mengxiang b:hover{color: white;cursor: pointer;}
			.mengxiang strong{font-size: 50px;float: right;}
			.mengxiang strong:hover{color: white;cursor: pointer;}
			/* 下面部分 */
			.weibu{width: 100%;height: 300px;background-color: rgba(51,51,51,1);
			border-bottom: 1px solid darkgray;position: relative;}
			.zuo{width: 300px;height: 200px;position: absolute;top: 60px;
			left: 250px;line-height: 50px;}
			.zuo ul{list-style: none;}
			.zuo ul li a{text-decoration: none;color: darkgray;margin: 0 20px;}
			.zuo ul li a:hover{color: white;}
			.you{width: 600px;height: 230px;background: url(diweibeijing.png) no-repeat center;
			background-size: cover;position: absolute;top: 50px;right: 200px;}
			.xia{width: 100%;height: 100px;background: url(543ade08582cf5245e85a41e3ed73d0.png)
			no-repeat center;background-size: auto;background-color: rgba(51,51,51,1);}
			.biance{width: 130px;height: 280px;background: url(ec669250fe359ae8e912bee475dbef4.png)
			no-repeat center;background-size: cover;position: fixed;right: 0px;bottom: 40px;}
			.biance a{display: block;width: 130px;height: 280px;}

		</style>
	</head>
	<body>
		<div class="zhuye">
			<div class="shangdaohan">
				<div class="shang">
					<div class="zhuye-logo"><a href="#"></a></div>
					<div class="daohang">
						<div class="zhuyedaohang daohang1"><a href="#">首页</a></div>
						<div class="zhuyedaohang daohang2"><a href="#">入驻加盟</a></div>
						<div class="zhuyedaohang daohang3"><a href="#">开放平台</a></div>
						<div class="zhuyedaohang daohang4"><a href="#">社会责任</a></div>
						<div class="zhuyedaohang daohang5"><a href="#">下载手机版</a></div>
					</div>
				</div>	
			</div>
		</div>
		<div class="zhongjian">
			<div class="zhongjian1"><a href="#"></a></div>
			<div class="zhongjian2"><a href="#"></a></div>
			<div class="zhongjian3"><a href="#"></a></div>
		</div>
		<div class="meiti">
			<div class="mt">
				<dl>
					<dt><a href="#">品类全覆盖，应有尽有</a></dt>
					<dd><a href="#">美食 Delicacy</a>
					<p>幸福甜蜜</p></dd>
					<dd><a href="#">甜点饮品 Desserts&Drinks </a>
					<p>新鲜速达</p></dd>
					<dd><a href="#">水果生鲜 Fresh foods</a>
					<p>优惠促销</p></dd>
					<dd><a href="#">超市便利 Supermarket</a>
					<p>大牌优惠</p></dd>
				</dl>
			</div>
			<div class="ri"></div>
		</div>
		<div class="xinwen">
			<div class="mengxiang">
			<b><</b> <strong>></strong>
			</div>
		</div>
		<div class="weibu">
			<div class="zuo">
				<ul>
					<li><a href="#">开放平台</a><a href="#">常见问题</a></li>
					<li><a href="#">媒体报道</a><a href="#">用户反馈</a></li>
					<li><a href="#">资质规则</a><a href="#">诚信举报</a></li>
					<li><a href="#">入驻加盟</a><a href="#">加入我们</a></li>
				</ul>
			</div>	
			<div class="you">
			</div>
		</div>
		<div class="xia"></div>
		<div class="biance"><a href="#"></a></div>
	</body>
</html>
